<script setup lang="ts">
import { ref } from 'vue';
import { ESButton } from 'earthsdk-ui';
const loading = ref(true);
</script>

<template>
    <div class="button-box">
        <!-- "default" | "primary" | "link" | "ghost", -->
        <es-button type="default">default</es-button>
        <es-button type="primary">primary</es-button>
        <es-button type="link">link</es-button>
        <es-button type="ghost">ghost</es-button>
        <es-button type="plain">plain</es-button>
        <br>
        <!-- "success" | "info" | "warning" | "danger", -->
        <es-button status="success">success </es-button>
        <es-button status="info">info </es-button>
        <es-button status="warning">warning </es-button>
        <es-button status="danger">danger</es-button>
        <es-button type="primary" status="success"> link danger</es-button>
        <es-button type="primary" status="info"> link danger</es-button>
        <es-button type="primary" status="warning"> link danger</es-button>
        <es-button type="primary" status="danger"> link danger</es-button>
        <es-button type="link" status="danger"> link danger</es-button>

        <es-button type="plain" status="success">plain</es-button>
        <br>
        <!-- "xs" | "sm" | "md" | "lg", -->
        <es-button size="xs">xs</es-button>
        <es-button size="sm">sm</es-button>
        <es-button size="md">md</es-button>
        <es-button size="lg">lg</es-button>
        <br>
        <!-- "square" | "bend" | "round", -->
        <es-button shape="square">square</es-button>
        <es-button shape="bend">bend</es-button>
        <es-button shape="round">round</es-button>
        <br>
        <!-- disabled-->
        <es-button disabled type="default">default</es-button>
        <es-button disabled type="primary">primary</es-button>
        <es-button disabled type="link">link</es-button>
        <es-button disabled type="ghost">ghost</es-button>
        <es-button disabled type="plain">plain</es-button>

        <es-button disabled status="success">success </es-button>
        <es-button disabled status="info">info </es-button>
        <es-button disabled status="warning">warning </es-button>
        <es-button disabled status="danger">danger</es-button>
        <es-button disabled type="primary" status="danger"> link danger</es-button>
        <es-button disabled type="link" status="danger"> link danger</es-button>
        <es-button disabled type="link" status="info"> link info</es-button>

        <ESButton :disabled="true">1233333</ESButton>
    </div>
</template>

<style scoped>
.button-box>button {
    margin: 10px;
    margin-left: 0px;
}
</style>
